<template>
  <div id="index">
    <dv-loading v-if="loading">Loading...</dv-loading>
    <div v-else class="koi-body">
      <div class="layoutHome1">
        <el-row>
          <el-col :span="16">
            <div :style="{height: kH3 * 2 + 'px'}">
              <dv-border-box12 style="padding: 12px">
                <!--                <chart-one></chart-one>-->
                <!--                <c1></c1>-->
<!--                <c3></c3>-->
                <c8></c8>
              </dv-border-box12>
            </div>
          </el-col>
          <el-col :span="8">
            <div :style="{height: kH6 * 2 + 'px'}">
              <dv-border-box12 style="padding: 12px">
                <!--                <chart-five></chart-five>-->
<!--                <c6></c6>-->
                <!--                <c7></c7>-->
                <c9></c9>
              </dv-border-box12>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import {formatTime} from '../utils'
import ChartOne from "../components/ChartOne"
import ChartTwo from "../components/ChartTwo"
import ChartThree from "../components/ChartThree"
import ChartFour from "../components/ChartFour"
import ChartFive from "../components/ChartFive"
import ChartSix from "../components/ChartSix"
import C1 from "../components/test/C1";
import C2 from "../components/test/C2";
import C4 from "../components/test/C4";
import C5 from "../components/test/C5";
import C7 from "../components/test/C7";
import C3 from "../components/test/C3";
import C6 from "../components/test/C6";
import C8 from "../components/test/C8";
import C9 from "../components/test/C9";
import {getComplexJson} from '../api'

export default {
  name: "Test2",
  components: {
    ChartOne,
    ChartTwo,
    ChartThree,
    ChartFour,
    ChartFive,
    ChartSix,
    C1,
    C2,
    C4,
    C5,
    C7,
    C3,
    C6,
    C8,
    C9
  },
  data() {
    return {
      data: null,
      loading: true,
      // 装饰8颜色
      decorationColor: ['#568aea', '#000000'],
      // 时间
      timer: null,
      // 屏幕定时器
      koiTime: null,
      // 定时跳转页面
      koiTimer: null,
      dateTime: null,
      dateDate: null,
      dateWeek: null,
      weekday: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
      kH3: 200,
      kHTwo: 500,
      kHThree: 300,
      kHFour: 500,
      kHFive: 450,
      kHSix: 300,
      kH6: 400,
      kHEight: 400,
      // 获取浏览器可视区域高度（包含滚动条）、
      // 获取浏览器可视区域高度（不包含工具栏高度）、
      // 获取body的实际高度  (三个都是相同，兼容性不同的浏览器而设置的)
      screenHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
      screenWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    }
  },
  methods: {
    timeInterval() {
      this.timer = setInterval(() => {
        this.dateTime = formatTime(new Date(), 'HH:mm:ss')
        this.dateDate = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    },
    resizeScreen() {
      this.koiTime = setInterval(() => {
        this.getScreenHeight()
        this.getScreenWidth()
      }, 200)
    },
    // 页面高度
    getScreenHeight() {
      this.screenHeight = window.innerHeight || document.documentElement.innerHeight || document.body.clientHeight
      this.kH3 = Math.round(this.screenHeight * 0.5)
      this.kHTwo = Math.round(this.screenHeight * 0.5)
      this.kHFour = Math.round(this.screenHeight * 0.5)
      this.kHFive = Math.round(this.screenHeight * 0.5)
      this.kH6 = Math.round(this.screenHeight * 0.5)
      this.kHEight = Math.round(this.screenHeight * 0.5)
    },
    // 页面宽度
    getScreenWidth() {
      this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
    },
    getMyData() {
      return this.data
    }
  },
  provide() {
    return {
      getMyData: this.getMyData
    }
  },
  mounted() {
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenWidth, false);
    this.timeInterval();
    this.cancelLoading();
    this.resizeScreen();
    getComplexJson().then(response => {
      this.data = response
    })
  },
  beforeDestroy() {
    // 删除事件
    clearInterval(this.timer)
    this.timer = null;
    // 删除屏幕定时器
    clearInterval(this.koiTime);
    this.koiTime = null;
    // 删除定时页面跳转
    clearInterval(this.koiTimer);
    this.koiTimer = null;
    // 页面大小改变时触发
    window.removeEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发
    window.removeEventListener('resize', this.getScreenWidth, false);
  },
  watch: {
    screenWidth: function (news, old) {
      if (news <= 1040) {
        this.$notify({
          title: '浏览器高度提示',
          dangerouslyUseHTMLString: true,
          message: '<strong style= "color: teal">浏览器宽度<1040px将不再进行自适应</strong>',
          type: 'warning',
          position: 'bottom-right',
          duration: 2000
        });
      }
    },
    screenHeight: function (news, old) {
      if (news <= 440) {
        this.$notify({
          title: '浏览器宽度提示',
          dangerouslyUseHTMLString: true,
          message: '<strong style= "color: teal">浏览器高度<440px将不再进行自适应</strong>',
          type: 'warning',
          position: 'bottom-right',
          duration: 2000
        });
      }
    }
  }
}
</script>
